<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-08 23:30:04
-->
<template>
    <div class="new-songs">
        <!-- 切换标签 -->
        <div class="top">
            <ul>
                <li v-for="(item,index) in tags" :key="index" :class="{active : activeTag === index}" @click="changeTag(index)">
                    <span>{{ item.name }}</span>
                </li>
            </ul>
        </div>

        <div class="content">
            <NewMusic v-if="activeTag === 0"></NewMusic>
            <NewAlbum v-if="activeTag === 1"></NewAlbum>
        </div>
    </div>
</template>

<script setup>
import NewMusic from '@/views/findmusic/newsongs/children/NewMusic.vue'
import NewAlbum from '@/views/findmusic/newsongs/children/NewAlbum.vue'
import { ref } from "vue";

let tags = ref([
    { name: '新歌速递' },
    { name: '新碟上架' }
])
let activeTag = ref(0)

//修改新歌速递 | 新碟上架
function changeTag(index){
    activeTag.value = index
}

</script>

<style lang="scss" scoped>
.new-songs {
    .top {
        padding-left: 380px;
        padding-right: 380px;
        ul {
            display: flex;
            width: 214px;
            border: 1px solid #cecece;
            border-radius: 15px;

            li {
                cursor: pointer;
                border-radius: 15px;
                padding: 5px 25px;
                span {
                    font-size: 14px;
                }
                // &:hover {
                //     background-color: #f5f5f5;
                // }
            }
        }
    }
    .content {
        margin-top: 20px;
    }
}
.active {
    background-color: #bbbbbb;
    color: white;
}
</style>